<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>

<head>
  <title>图片列表</title>
  {{template "admin/html-head.html" .}}
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->

<body class="hold-transition skin-blue sidebar-mini">
  <div class="wrapper">

    <!-- Main Header -->
    {{template "admin/html-header.html" .}}
    <!-- Left side column. contains the logo and sidebar -->
    {{template "admin/html-aside.html" .}}

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <!-- Content Header (Page header) -->
      <section class="content-header">
        <h1>
          Data Tables
          <small>advanced tables</small>
        </h1>
        <ol class="breadcrumb">
          <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
          <li><a href="#">Tables</a></li>
          <li class="active">Data tables</li>
        </ol>
      </section>

      <!-- Main content -->
      <section class="content">
        <div class="row">
          <div class="col-xs-12">
            <div class="box">
              <div class="box-header">
                <h3 class="box-title">Data Table With Full Features</h3>
              </div>
              <!-- /.box-header -->
              <div class="box-body">
                <table id="userlist" class="table table-bordered table-striped">
                  <thead>
                    <tr>
                      <th>ID</th>
                      <th>tag</th>
                      <th width="60%">url</th>
                      <th>createdAt</th>
                      <th width="120px">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    {{/*<tr>
                      <td></td>
                    </tr>*/}}
                  </tbody>
                  <tfoot>
                    <tr>
                      <th>ID</th>
                      <th>tag</th>
                      <th>url</th>
                      <th>createdAt</th>
                      <th>操作</th>
                    </tr>
                  </tfoot>
                </table>
              </div>
              <!-- /.box-body -->
            </div>
            <!-- /.box -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </section>
      <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    <footer class="main-footer">
      <!-- To the right -->
      <div class="pull-right hidden-xs">
        Anything you want
      </div>
      <!-- Default to the left -->
      <strong>Copyright &copy; 2016 <a href="#">Company</a>.</strong> All rights reserved.
    </footer>

    <!-- Control Sidebar -->
    {{template "admin/html-control-sidebar.html"}}
    <!-- /.Control-sidebar -->
  </div>
  <!-- ./wrapper -->

  <!-- REQUIRED JS SCRIPTS -->
  {{template "admin/html-js.html"}}
  <!-- /REQUIRED JS SCRIPTS -->

  <!-- page script -->
  <script type="text/javascript">
    $(function () {
      //列表
      var userList = $('#userlist').DataTable({
        language: {
          processing: "数据加载中……",
          zeroRecords: "No records to display"
        },
        paging: true,
        lengthChange: false,
        searching: true,
        ordering: true,
        info: true,
        autoWidth: false,
        serverSide: true,
        processing: true,
        ajax: function (data, callback, settings) {
          var postData = {
            draw: data.draw,
            perPage: data.length,
            start: data.start,
            search: data.search.value
          };
          $.ajax({
            url: '/admin/picture-list',
            type: 'GET', //GET
            data: postData,
            timeout: 5000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend: function (xhr) {
              console.log('发送前')
            },
            success: function (res, textStatus, jqXHR) {
              if (res.code == 1) {
                layer.msg(res.msg, { icon: 5 });
                return
              }
              var dtData = {
                recordsTotal: res.data.total || 0,
                recordsFiltered: res.data.total || 0,
                data: res.data.result || [],
                draw: res.data.draw || 0
              };
              callback(dtData);
            },
            error: function (xhr, textStatus) {
              console.log('错误')
            },
            complete: function () {
              console.log('结束')
            }
          })
        },
        rowId: 'id',//自动设置行id
        columns: [
          { data: 'id' },
          {
            data: 'tag',
            render: function (data, type, row) {
              var tags = [];
              if (data.length > 0) {
                tags = data.split(",");
              }
              var html = "";
              tags.forEach(element => {
                html += '<span class="label label-success">' + element + '</span>';
              });
              return html;
            }
          },
          {
            data: 'pic_url',
            render: function (data, type, row) {
              var html = '<a href="' + data + '" target="_blank">' + data + '</a>'
              return html;
            }
          },
          {
            data: 'created_at',
            render: function (data, type, row, settings) {
              return moment(data).format("YYYY-MM-DD HH:mm:ss");
            }
          },
          {
            data: '',
            render: function (data, type, row) {
              var html = '<button class="btn btn-sm btn-danger J-delete">删除</button>'
              return html;
            }
          }
        ],
        "createdRow": function (row, data, dataIndex) {
          //有了DT_RowId属性就会自动添加id到行上,不需要在此操作，可以做其他事
          // $(row).data("userName", data.userName);
        }
      });
      //删除
      $("#userlist").on("click", ".J-delete", function () {
        var id = $(this).closest("tr").attr("id");
        if (confirm("确定删除？")) {
          $.ajax({
            url: '/admin/picture-delete',
            type: 'post', //GET
            async: true,    //或false,是否异步
            data: {
              picId: id
            },
            timeout: 5000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend: function (xhr) {
              console.log('发送前')
            },
            success: function (data, textStatus, jqXHR) {
              if (data.code == 1) {
                layer.msg(data.msg, { icon: 5 });
                return
              }
              layer.msg("删除成功！", { icon: 6 });
              userList.ajax.reload();
            },
            error: function (xhr, textStatus) {
              console.log('错误')
            },
            complete: function () {
              console.log('结束')
            }
          })
        }
      });
      //修改
      $("#userlist").on("click", ".J-update", function () {
        var id = $(this).closest("tr").attr("id");
        $.get("/admin/user/" + id, function (data) {
          $("#userId").val(id);
          $("#username").val(data.data.user_name);
          $("#gender").val(data.data.gender);
          $("#email").val(data.data.email);
          $("#mobile").val(data.data.mobile);
          $("#desc").val(data.data.description);
          $("#address").val(data.data.addr);
          layer.open({
            type: 1,
            area: ['500px', 'auto'],
            btn: ['确定', '取消'],
            fixed: false,//跟随滚动
            shadeClose: true, //点击遮罩关闭
            content: $("#update-dialog"),
            yes: function (index, layero) {
              $.ajax({
                url: '/admin/user',
                type: 'PUT', //GET
                async: true,    //或false,是否异步
                data: {
                  userId: $("#userId").val(),
                  username: $("#username").val(),
                  gender: $("#gender").val(),
                  email: $("#email").val(),
                  mobile: $("#mobile").val(),
                  desc: $("#desc").val(),
                  addr: $("#address").val()
                },
                timeout: 5000,    //超时时间
                dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                success: function (data, textStatus, jqXHR) {
                  if (data.code == 1) {
                    layer.msg(data.msg, { icon: 5 });
                    return
                  }
                  layer.msg("修改成功！", { icon: 6 });
                  layer.close(index); //如果设定了yes回调，需进行手工关闭
                  userList.ajax.reload();
                },
                error: function (xhr, textStatus) {
                  layer.msg("修改失败！", { icon: 5 });
                },
                complete: function () {

                }
              })
            }, btn2: function (index, layero) {
              layer.close(index);
            }
          });
        })
      });
    })
  </script>
</body>

</html>